import React from 'react'
import { Image, Text, View } from '@tarojs/components'
import { PainLogITF } from '@INTERFACES/PainLog'
import { LanguageType } from '@INTERFACES/Common'
import Images from '@ASSET/Images'
import { PAIN_RATING_TYPES } from '@CONSTANTS/pain'
import i18n from '@I18N'
import Taro from '@tarojs/taro'
import style from './LogItem.module.scss'

interface Props {
  data: PainLogITF
  language: LanguageType
  onEditLog: (item: PainLogITF) => void
  onDelete: (item: PainLogITF) => void
}

const LogItem: React.FC<Props> = ({ data, language, onEditLog, onDelete }) => {
  const { OverallRating, HeadPain, BodyPainSites } = data
  const isNoPain = OverallRating === 0
  const text = HeadPain ? i18n.common.headache()
    : BodyPainSites?.reduce((pre, currentValue, currentIndex) => `${pre}${currentIndex === 0 ? '' : '、'}${currentValue?.[language]}痛`, '')
  const onClickEdit = () => {
    if (isNoPain) return
    onEditLog(data)
  }
  const onDeleteItem = () => {
    Taro.showModal({
      title: '确认删除该日志?',
      confirmText: '确认',
      confirmColor: '#47C690',
      success: res => {
        if (res.confirm) {
          onDelete?.(data)
        }
      }
    })
  }
  const icon = HeadPain ? Images.dataCenter.iconHeadPain : `${Images.bodyImgDir}${BodyPainSites?.[0]?.Name}.png`
  return (
    <View
      className={style.container}
      onLongPress={onDeleteItem}
      onClick={onClickEdit}
    >
      <Image
        src={isNoPain ? Images.dataCenter.icon_no_pain : icon}
        className={style.iconOverall}
      />
      <View className={style.content}>
        <View className={style.bodyContainer}>
          <Text className={style.bodyText}>{isNoPain ? i18n.dataCenter.noPain() : text}</Text>
          <View className={style.line} />
        </View>
        <Text
          className={style.overallText}
        >
          {isNoPain ? i18n.dataCenter.noPainTips() : `${OverallRating}级 ${PAIN_RATING_TYPES[OverallRating]}`}
        </Text>
      </View>
      {!isNoPain && <Image src={Images.dataCenter.icon_edit} className={style.iconEdit} />}
    </View>
  )
}

export default LogItem
